<template>
  <div class="content">
    <ul class="lists">
      <li v-for="item in list" :key="item.pid" v-tap="{methods:tap,id:item.pid}">
        <img :src="item.pimg" alt />
        <span>{{item.pname}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import * as api from "../api/getProlist";
export default {
  name: "Classcontent",
  data() {
    return {
      list: []
    };
  },
  methods: {
    tap(id) {
      this.$router.push("/classdetail?id=" + id.id);
    }
  },
  mounted() {
    api.getClass({ pclass: 1 }).then(data => {
      this.list = data.data.result;
    });
  },
  watch: {
    $route(newvalue) {
      api.getClass({ pclass: this.$route.query.id }).then(data => {
        this.list = data.data.result;
      });
    }
  }
};
</script>

<style scoped>
.van-ellipsis {
  font-size: 30px;
}
.lists {
  width: 70%;
  height: 1200px;
  float: left;
  margin-top: 30px;
  margin-left: 10px;
  overflow: auto;
  padding-bottom:100px;
}
.lists li {
  float: left;
  list-style: none;
  width: 48%;
  margin-right: 2%;
  margin-bottom: 2%;
  position: relative;
}
.lists li img {
  width: 100%;
  height: 300px;
}
.lists li span {
  position: absolute;
  left: 5px;
  top: 5px;
}
</style>